<script lang="ts">
  import AsyncImage from "$lib/components/image/AsyncImage.svelte";
  import { userStore } from "$lib/stores/user.svelte";
  import { LogOut, PenLine, SquareAsterisk } from "lucide-svelte";
  import EditUserPhotoModal from "./EditUserPhotoModal.svelte";
  import EditUserDisplayNameModal from "./EditUserDisplayNameModal.svelte";
  import EditPasswdModal from "./EditPasswdModal.svelte";

  let showEditPhotoModal = $state(false);
  let showEditNameModal = $state(false);
  let showChangePwdModal = $state(false);
</script>

<div class="h-[80px] overflow-hidden">
  <header
    class="grid grid-rows-2 grid-cols-[100px_1fr] grid-flow-col pr-[10px]"
  >
    <div class="row-span-2 flex justify-items-center justify-center">
      {#if userStore.userSession == ""}
        <AsyncImage
          sizeClass="w-[60px] h-[60px]"
          borderClass="rounded-[30px]"
        />
      {:else}
        <AsyncImage
          sizeClass="w-[60px] h-[60px]"
          borderClass="rounded-[30px]"
          src={userStore.userInfo?.basic_info.logo_uri ?? ""}
          onclick={() => (showEditPhotoModal = true)}
        />
      {/if}
    </div>
    {#if userStore.userSession == ""}
      <div class="text-left content-center row-span-2">
        <button
          class="btn text-[20px] hover:preset-filled-primary-900-100 rounded-none"
          onclick={() => (userStore.showLoginModal = true)}>未登录</button
        >
      </div>
    {:else}
      <div
        class="text-[20px] text-left content-center pl-1 flex justify-between"
      >
        <div
          class="w-[80px] truncate"
          title={userStore.userInfo?.basic_info.display_name ?? ""}
        >
          {userStore.userInfo?.basic_info.display_name ?? ""}
        </div>
        <button
          type="button"
          class="btn hover:preset-filled-primary-900-100 p-1 rounded-none"
          title="修改昵称"
          onclick={() => (showEditNameModal = true)}
        >
          <PenLine size={20} />
        </button>
      </div>
      <div class="flex justify-between">
        <button
          type="button"
          class="btn hover:preset-filled-primary-900-100 p-1 rounded-none"
          title="修改密码"
          onclick={() => (showChangePwdModal = true)}
        >
          <SquareAsterisk size={20} />
        </button>
        <button
          type="button"
          class="btn hover:preset-filled-error-900-100 p-1 rounded-none"
          title="退出登录"
          onclick={() => (userStore.showLogoutModal = true)}
        >
          <LogOut size={20} />
        </button>
      </div>
    {/if}
  </header>
  <div class="mt-[100px]">
    {#if showEditPhotoModal}
      <EditUserPhotoModal onClose={() => (showEditPhotoModal = false)} />
    {/if}
    {#if showEditNameModal}
      <EditUserDisplayNameModal onClose={() => (showEditNameModal = false)} />
    {/if}
    {#if showChangePwdModal}
      <EditPasswdModal onClose={() => (showChangePwdModal = false)} />
    {/if}
  </div>
</div>
